<template>
	<view class="search-result-page">
		<!-- 搜索栏 -->
		<view
			style="display: flex;align-items: center;justify-content: space-between;background-color: #fff;width: 100%;">
			<uni-icons type="left" size="25" @click="back"></uni-icons>
			<view class="search-bar">
				<uni-icons type="search" size="20"></uni-icons>
				<input type="text" placeholder="故宫博物馆" />
			</view>
		</view>

		<!-- 选项卡 -->
		<view class="tabs">
			<view :class="{'tab': true, 'active': activeTab === 0}" @click="switchTab(0)">综合</view>
			<view :class="{'tab': true, 'active': activeTab === 1}" @click="switchTab(1)">游记</view>
			<view :class="{'tab': true, 'active': activeTab === 2}" @click="switchTab(2)">景点</view>
		</view>

		<!-- 景点信息 -->
		<uni-tag class="tag" :mark="true" text="最相关" type="primary" size="small" />
		<view @click="toJD" class="spot-info">
			<image class="spot-image"
				src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u495.svg"
				mode="aspectFill"></image>
			<view class="spot-details">
				<text class="spot-name">故宫博物馆</text>
				<uni-tag text="5A"
					custom-style="background-color: #F2F2F2; border-color: #F2F2F2; color: #666;width: 30rpx;font-weight: 400;">
				</uni-tag>
				<text class="spot-score"><text style="color: #4676EE;font-size: 30rpx;font-weight: 600;">4.8分</text>
					<text style="font-size: 20rpx;margin-left: 10rpx;">17532人评价</text>
				</text>
				<text class="spot-address">北京市东城区景山前街4号</text>
			</view>
		</view>

		<!-- 排序选项 -->
		<view class="sorting-options">
			<view class="option">智能排序</view>
			<view class="option">最新发布</view>
			<view class="option">最靠近景点</view>
		</view>

		<!-- 游记列表 -->
		<view class="post-list">
			<block v-for="(post, index) in posts" :key="index">
				<view class="post" @click="detailGo">
					<image :src="post.image" mode="aspectFill" class="post-image"></image>
					<view class="post-info">
						<view class="post-title">{{ post.title }}</view>
						<view
							style="display: flex;align-items: center;justify-content: space-between; height: 40rpx;margin-top: 20rpx;">
							<text class="post-author" style="font-size: 20rpx;">{{ post.author }}</text>
							<text class="post-views" style="font-size: 20rpx;">
								<uni-icons class="icon" type="eye" size="15"></uni-icons>{{ post.views }}
							</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const activeTab = ref(0)

	const toJD = () => {
		uni.navigateTo({
			url: "/pagesB/jingdian/index"
		})
	}
	const back=()=>{
		uni.navigateBack({
			data:1
		})
	}
	const detailGo=()=>{
		uni.navigateTo({
			url:"/pagesB/wengzhangyouji/index"
		})
	}
	const switchTab = (value) => {
		console.log(value)
		console.log(activeTab)
		activeTab.value = value
	}
	const posts = reactive([{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p0.png',
			title: '和家人果断在北京续住3天的神仙小院',
			author: '晚风心里吹',
			views: '1.9万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p7.png',
			title: '人少景美“京西小故宫”修缮五年后惊艳开放',
			author: '唐糖唐来了',
			views: '1.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p2.png',
			title: '北京海拔2000米的木栈道帝都最高观景平台',
			author: '美腻的猫...',
			views: '2.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p11.png',
			title: '别再去坡峰岭了，这里不堵车！',
			author: '美美在旅行',
			views: '1.9万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p4.png',
			title: '北京郊区大自然山景私汤山酒店',
			author: '美美在旅行',
			views: '1.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p13.png',
			title: '秋冬京城小奈良动物园里泡温泉',
			author: '万能小夏姐',
			views: '2.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p9.png',
			title: '美哭，我宣布这是北京秋日郊游的TOP1',
			author: '小沈阳10...',
			views: '1.9万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5/p30.png',
			title: '再过20天，北京的这里将美成画！',
			author: '旅行的皇后',
			views: '1.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p6.png',
			title: '北京周末去哪，找到了人少景美的仙境了！',
			author: '晚风心里吹',
			views: '2.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5/p32.png',
			title: '不出市区就可以全家嗨玩儿一整天',
			author: '星星探旅',
			views: '2.1万'
		}
	])
</script>

<style scoped>
	.search-result-page {
		/* padding: 10px; */
		background-color: #f5f5f5f5;
	}


	.tag {
		position: absolute;
		left: 20rpx;
		top: 210rpx;
		z-index: 99;
	}

	.search-bar {
		width: 320px;
		height: 40rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		border-radius: 50rpx;
		border: 1px solid #85A5F4;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.search-bar input {
		flex: 1;
		border: none;
		outline: none;
		padding: 5rpx;
	}

	.tabs {
		width: 100%;
		display: flex;
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 10px;
		font-size: 30rpx;
	}

	.tab {
		/* flex: 1; */
		text-align: center;
		padding: 10px 0;
		cursor: pointer;
		margin-left: 60rpx;
	}

	.active {
		font-weight: 600;
		border-bottom: 2px solid #4676EE;
	}

	.spot-info {
		display: flex;
		background-color: #fff;
		padding: 10px;
		border-radius: 5px;
		margin: 10px;
	}

	.spot-image {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		border-radius: 5px;
	}

	.spot-details {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.spot-name {
		font-size: 18px;
		font-weight: bold;
	}

	.spot-level,
	.spot-score,
	.spot-address {
		font-size: 14px;
		color: #666;
	}

	.sorting-options {
		display: flex;
		padding: 10rpx;
		margin-bottom: 10px;
	}

	.option {
		text-align: center;
		font-size: 27rpx;
		margin-right: 40rpx;
	}

	.post-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.post {
		width: 45%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 5rpx;
		background-color: #ffffff;
		border-radius: 5px;
		overflow: hidden;
		margin: 15rpx;
	}

	.post-image {
		width: 100%;
		height: 350rpx;
	}

	.post-info {
		padding: 10px;
	}

	.post-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.post-author {
		color: #888888;
		margin-bottom: 5px;
	}

	.post-views {
		color: #cccccc;
	}
</style>